<template>
    <div>
        <div ref="chart" style="width: 1200px; height: 400px"></div>
    </div>
</template>
<script>
import {defineComponent, onMounted, reactive, ref, toRefs} from "vue";
import * as echarts from "echarts"
import {author_net} from "@/api/post/author_net";
export default defineComponent({
    setup() {
        const chart = ref();
        // -------------onMounted钩子，组件挂载完毕异步加载数据--------------
        onMounted(() => {
            // 基于准备好的dom，初始化echarts实例
            const myChart = echarts.init(chart.value);

            // 显示加载中动画
            myChart.showLoading();

            // 异步加载数据
            author_net(1).then((response) => {
                if(response.data.status.code===0){

                    // 隐藏加载中动画
                    myChart.hideLoading();

                    // 定义数据类型
                    const graph = {
                        "nodes": [

                        ],
                        "links": [

                        ],
                        "categories": [
                            {
                                "name": "A"
                            },
                            {
                                "name": "B"
                            },
                            {
                                "name": "C"
                            },
                            {
                                "name": "D"
                            },
                        ]
                    }

                    const papers = response.data.data.paperList;
                    // 绑定数据
                    state.paperList = papers;
                    // **********测试*********
                    console.log("paperList=",state.paperList);

                    // 在这里处理返回的 JSON 数据
                    for (let i = 0; i < papers.length; i++) {
                        // 声明当前遍历的论文
                        let paper = papers[i];
                        // 获取该论文的所有作者
                        let authors = paper.authors;
                        for (let j = 0; j < authors.length; j++) {
                            // 声明当前遍历的作者
                            let author = authors[j];
                            // 添加前进行判断，以免节点重复
                            let isNodeExist = graph.nodes.some(node => node.id === author.author_id.toString());
                            if (!isNodeExist){
                                // 添加新节点
                                let newNode = {
                                    // id必须是string类型
                                    "id": author.author_id.toString(),
                                    "name": author.author_name,
                                    // ***********暂时设置为默认值***********
                                    "symbolSize": 20,
                                    // 在label中显示论文title
                                    "value": paper.title,
                                    // ***********暂时设置为默认值***********
                                    "category": i%4
                                };
                                graph.nodes.push(newNode);
                            }
                            // 添加边，排列组合
                            for (let k = j+1; k < authors.length; k++) {
                                // 声明当前遍历的作者
                                let author_next = authors[k];
                                let newLink = {
                                    "source": author.author_id.toString(),
                                    "target": author_next.author_id.toString()
                                };
                                graph.links.push(newLink);
                            }
                        }

                    }

                    // 数据处理
                    graph.nodes.forEach(function (node) {
                        node.label = {
                            show: node.symbolSize > 15
                        };
                    });

                    // **********测试*********
                    console.log("nodes=",graph.nodes);
                    console.log("links=",graph.links);

                    // 指定图表的配置项和数据
                    const option = {
                        title: {
                            text: 'Les Miserables',
                            subtext: 'Default layout',
                            top: 'bottom',
                            left: 'right'
                        },
                        tooltip: {},
                        legend: [
                            {
                                data: graph.categories.map(function (a) {
                                    return a.name;
                                })
                            }
                        ],
                        animationDuration: 1500,
                        animationEasingUpdate: 'quinticInOut',
                        series: [
                            {
                                name: 'Les Miserables',
                                type: 'graph',
                                layout: 'circular',
                                circular: {
                                    rotateLabel: true // 旋转标签
                                },
                                data: graph.nodes,
                                links: graph.links,
                                categories: graph.categories,
                                roam: true,
                                label: {
                                    position: 'right',
                                    formatter: '{b}'
                                },
                                // 自动隐藏重叠标签
                                labelLayout: {
                                    hideOverlap: true
                                },
                                scaleLimit: {
                                    min: 0.4,
                                    max: 2
                                },
                                lineStyle: {
                                    color: 'source',
                                    curveness: 0.3
                                },
                                emphasis: {
                                    focus: 'adjacency',
                                    lineStyle: {
                                        width: 10
                                    }
                                }
                            }
                        ]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }
            })

            // // 隐藏加载中动画
            // myChart.hideLoading();
            //
            // const graph = {
            //     "nodes": [
            //         {
            //             "id": "1",
            //             "name": "Bruno Merin",
            //             "symbolSize": 20,
            //             // "x": -266.82776,
            //             // "y": 299.6904,
            //             "value": "The Spitzer c2d Survey of Large, Nearby, Insterste…ens YSO Population As Observed With IRAC and MIPS",
            //             "category": 0
            //         },
            //         {
            //             "id": "2",
            //             "name": "Tracy L. Huard",
            //             "symbolSize": 20,
            //             "value": "The Spitzer c2d Survey of Large, Nearby, Insterste…ens YSO Population As Observed With IRAC and MIPS",
            //             "category": 0
            //         },
            //         {
            //             "id": "3",
            //             "name": "Luisa M. Rebull",
            //             "symbolSize": 20,
            //             "value": "The Spitzer c2d Survey of Large, Nearby, Insterste…ens YSO Population As Observed With IRAC and MIPS",
            //             "category": 0
            //         },
            //         {
            //             "id": "57",
            //             "name": "Lucas Cieza",
            //             "symbolSize": 20,
            //             "value": "The Spitzer c2d Survey of Weak-line T Tauri Stars …Constraints on  the Timescale for Planet Building",
            //             "category": 1
            //         },
            //         {
            //             "id": "60",
            //             "name": "Deborah L. Padgett",
            //             "symbolSize": 20,
            //             "value": "The Spitzer c2d Survey of Weak-line T Tauri Stars …Constraints on  the Timescale for Planet Building",
            //             "category": 1
            //         },
            //         {
            //             "id": "61",
            //             "name": "Karl R. Stapelfeldt",
            //             "symbolSize": 20,
            //             "value": "The Spitzer c2d Survey of Weak-line T Tauri Stars …Constraints on  the Timescale for Planet Building",
            //             "category": 1
            //         },
            //     ],
            //     "links": [
            //         {
            //             "source": "1",
            //             "target": "2"
            //         },
            //         {
            //             "source": "1",
            //             "target": "3"
            //         },
            //         {
            //             "source": "2",
            //             "target": "3"
            //         },
            //         {
            //             "source": "57",
            //             "target": "60"
            //         },
            //         {
            //             "source": "57",
            //             "target": "61"
            //         },
            //         {
            //             "source": "57",
            //             "target": "1"
            //         },
            //         {
            //             "source": "60",
            //             "target": "61"
            //         },
            //         {
            //             "source": "60",
            //             "target": "1"
            //         },
            //         {
            //             "source": "61",
            //             "target": "1"
            //         },
            //     ],
            //     "categories": [
            //         {
            //             "name": "A"
            //         },
            //         {
            //             "name": "B"
            //         },
            //     ]
            // }
            // // 在这里处理返回的 JSON 数据
            //
            //
            // // 数据处理
            // graph.nodes.forEach(function (node) {
            //     node.label = {
            //         show: node.symbolSize > 30
            //     };
            // });
            //
            // // 指定图表的配置项和数据
            // const option = {
            //     title: {
            //         text: 'Les Miserables',
            //         subtext: 'Default layout',
            //         top: 'bottom',
            //         left: 'right'
            //     },
            //     tooltip: {},
            //     legend: [
            //         {
            //             data: graph.categories.map(function (a) {
            //                 return a.name;
            //             })
            //         }
            //     ],
            //     animationDuration: 1500,
            //     animationEasingUpdate: 'quinticInOut',
            //     series: [
            //         {
            //             name: 'Les Miserables',
            //             type: 'graph',
            //             layout: 'circular',
            //             circular: {
            //                 rotateLabel: true // 旋转标签
            //             },
            //             data: graph.nodes,
            //             links: graph.links,
            //             categories: graph.categories,
            //             roam: true,
            //             label: {
            //                 position: 'right',
            //                 formatter: '{b}'
            //             },
            //             // 自动隐藏重叠标签
            //             labelLayout: {
            //                 hideOverlap: true
            //             },
            //             scaleLimit: {
            //                 min: 0.4,
            //                 max: 2
            //             },
            //             lineStyle: {
            //                 color: 'source',
            //                 curveness: 0.3
            //             },
            //             emphasis: {
            //                 focus: 'adjacency',
            //                 lineStyle: {
            //                     width: 10
            //                 }
            //             }
            //         }
            //     ]
            // };
            //
            // // 使用刚指定的配置项和数据显示图表。
            // myChart.setOption(option);
        });

        // --------------------定义的响应数据-----------------------
        const state = reactive({
            paperList: [],
        })

        // ----------------------return函数-------------------
        return {
            ...toRefs(state),
            // setup中声明了chart这个echarts响应式变量，只有return该变量才能在模板中使用，即ref="chart"
            chart,
        }
    }
})
</script>